<template>
  <div class="seller" ref="scrollRef">
    <div class="scoll-wrap">
      <div class="seller-detail">
        <div class="detail-top">
          <h1 class="heading">{{seller.name}}</h1>
          <div class="star-wrap">
            <star :size="36" :score="seller.score"></star>
            <span class="ratings">({{seller.ratingCount}})</span>
            <span>月售{{seller.sellCount}}单</span>
          </div>
          <div class="collect">
            <i class="icon-favorite" :class="{active: isFavorite}" @click="toggleFavorite"></i>
            <span class="text">{{favoriteName}}</span>
          </div>
        </div>
        <div class="detail-bottom">
          <div class="min-price item">
            <div class="title">起送价</div>
            <div class="wrap">
              <span class="price">{{seller.minPrice}}</span>元
            </div>
          </div>
          <div class="delivery-price item">
            <div class="title">商家配送</div>
            <div class="wrap">
              <span class="price">{{seller.deliveryPrice}}</span>元
            </div>
          </div>
          <div class="delivery-time item">
            <div class="title">平均送达时间</div>
            <div class="wrap">
              <span class="time">{{seller.deliveryTime}}</span>分钟
            </div>
          </div>
        </div>
      </div>
      <split-line></split-line>
      <div class="activity-wrap">
        <h3 class="heading">公告与活动</h3>
        <p class="bulletin">{{seller.bulletin}}</p>
        <div class="supports">
          <ul>
            <li class="support" :key="i" v-for="(support,i) in seller.supports">
              <discount :imgType="support.type" :size="4"></discount>
              <span class="text">{{support.description}}</span>
            </li>
          </ul>
        </div>
      </div>
      <split-line></split-line>
      <div class="scene">
        <h3 class="heading">商家实景</h3>
        <div class="pics-wrap" ref="picScrollRef">
          <div class="pics" ref="picRef">
            <img v-for="(pic,i) in seller.pics" :src="pic" :key="i" class="pic" />
          </div>
        </div>
      </div>
      <split-line></split-line>
      <div class="infos">
        <h3 class="heading title">商家信息</h3>
        <ul>
          <li class="info-item" v-for="(info,i) in seller.infos" :key="i">{{info}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import splitLine from '../SplitLine'
import star from '../star/Star'
import discount from '../Discount'
import BScroll from 'better-scroll'
import { loadFormLocal, saveLocal } from '../../assets/js/store'
export default {
  props: ['seller'],
  data() {
    return {
      scroll: null,
      imgs: 0,
      picScroll: null,
      isFavorite: (() => {
        return loadFormLocal(this.seller.id, 'favorite', false)
      })()
    }
  },
  methods: {
    toggleFavorite() {
      this.isFavorite = !this.isFavorite
      saveLocal(this.seller.id, 'favorite', this.isFavorite)
    },
    initScroll() {
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.scrollRef, {
            click: true
          })
        } else {
          this.scroll.refresh()
        }
      })
    },
    initPics() {
      var margin = 0.12
      var width = 2.4
      var picWidth = (margin + width) * this.seller.pics.length
      this.$refs.picRef.style.width = picWidth + 'rem'
      this.$nextTick(() => {
        if (!this.picScroll) {
          this.picScroll = new BScroll(this.$refs.picScrollRef, {
            scrollX: true,
            eventPassthrough: 'vertical'
          })
        } else {
          this.picScroll.refresh()
        }
      })
    }
  },
  computed: {
    favoriteName() {
      return this.isFavorite ? '已收藏' : '收藏'
    }
  },
  watch: {
    seller() {
      this.initPics()
      this.initScroll()
    }
  },
  mounted() {
    this.initPics()
    this.initScroll()
  },
  components: {
    splitLine,
    star,
    discount
  }
}
</script>
<style scoped lang="stylus">
.seller {
  position: absolute;
  top: 3.48rem;
  bottom: 0;
  width: 100%;
  overflow: hidden;

  .scoll-wrap {
    padding-bottom: 1.04rem;
  }

  .seller-detail {
    padding: 0.36rem;

    .detail-top {
      position: relative;
      border-bottom: 1px solid rgba(7, 17, 27, 0.1);
      padding-bottom: 0.36rem;

      .name {
        font-size: 0.28rem;
        color: rgb(7, 17, 27);
        line-height: 0.28rem;
      }

      .star-wrap {
        margin-top: 0.16rem;
        font-size: 0.2rem;
        color: rgb(77, 85, 93);

        .star {
          vertical-align: -0.08rem;
          display: inline-block;
          margin-right: 0.16rem;
        }

        .ratings {
          margin-right: 0.24rem;
        }
      }

      .collect {
        position: absolute;
        top: 0;
        right: 0;
        width: 0.74rem;
        text-align: center;

        .icon-favorite {
          display: block;
          font-size: 0.48rem;
          text-align: center;
          color: #d4d6d9;

          &.active {
            color: rgb(240, 20, 20);
          }
        }

        .text {
          font-size: 0.2rem;
          color: rgb(77, 85, 93);
        }
      }
    }

    .detail-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 0.36rem;

      .item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-right: 1px solid rgba(7, 17, 27, 0.1);

        &:last-child {
          border-right: none;
        }

        .title {
          font-size: 0.2rem;
          color: rgb(147, 153, 159);
        }

        .wrap {
          margin-top: 0.08rem;
          font-size: 0.2rem;
          color: rgb(7, 17, 27);
          font-weight: 200;
          line-height: 0.48rem;

          .price, .time {
            font-size: 0.48rem;
          }
        }
      }
    }
  }

  .activity-wrap {
    padding: 0.36rem 0.36rem 0;

    .bulletin {
      padding: 0.16rem 0.24rem 0.32rem;
      font-size: 0.24rem;
      font-weight: 200;
      color: rgb(240, 20, 20);
      line-height: 0.48rem;
      border-bottom: 1px solid rgba(7, 17, 27, 0.1);
    }

    .supports {
      .support {
        padding: 0.32rem 0.24rem;
        border-bottom: 1px solid rgba(7, 17, 27, 0.1);
        vertical-align: middle;

        .text {
          vertical-align: middle;
          margin-left: 0.12rem;
          font-size: 0.24rem;
          color: rgb(7, 17, 27);
        }
      }
    }
  }

  .scene {
    padding: 0.36rem;
    padding-right: 0;

    .pics-wrap {
      margin-top: 0.24rem;
      width: 100%;
      overflow: hidden;

      .pic {
        display: inline-block;
        height: 1.8rem;
        width: 2.4rem;
        margin-right: 0.12rem;
      }
    }
  }

  .infos {
    padding: 0.36rem;
    padding-bottom: 0;

    .title {
      border-bottom: 1px solid rgba(7, 17, 27, 0.1);
      padding-bottom: 0.24rem;
    }

    .info-item {
      padding: 0.32rem 0.24rem;
      line-height: 0.32rem;
      border-bottom: 1px solid rgba(7, 17, 27, 0.1);

      &:last-child {
        border-bottom: none;
      }
    }
  }

  .heading {
    font-size: 0.28rem;
    color: rgb(7, 17, 27);
    line-height: 0.28rem;
    font-weight: 700;
  }
}
</style>
